<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>18_处理内容的溢出</title>
    <style>
        #d1 {
            width: 400px;
            height: 200px;
            background-color: skyblue;
            /* 处理溢出问题 */
            /* overflow: auto; */
            overflow-x: hidden;
            overflow-y: scroll;
        }
        #d2 {
            width: 1000px;
            background-color: orange;
        }
    </style>
</head>

<body>
    <div id="d1">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam, incidunt recusandae aliquid ipsum
        necessitatibus beatae officia autem sequi voluptatibus unde sapiente quod ipsam repellendus veritatis, et
        <div id="d2">
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Inventore eaque facere deleniti repellat
            debitis voluptatem soluta sed, eos praesentium. Reiciendis doloremque eos numquam repellendus a fugiat
            facere quod iste modi vero facilis laudantium dolorum cupiditate dicta ad unde ipsa enim itaque commodi,
            omnis iure ipsum odit. Tenetur, corporis alias! Voluptatum!
        </div>
        provident, corrupti corporis. Fugit nostrum quod harum enim aut, aperiam porro vel quidem necessitatibus quis!
        Doloribus saepe velit voluptatem corporis quas ipsum quibusdam tempora dolore laboriosam reiciendis suscipit
        recusandae eaque harum, sed ad rem? Aliquam iste porro ea facere illo necessitatibus ex error harum adipisci
        minus, sapiente autem officiis eos molestiae at temporibus quod soluta. Facilis deleniti nostrum doloribus non,
        sunt ullam enim inventore doloremque error quis suscipit iure dolor eos placeat ab reprehenderit?
    </div>
</body>

</html>